<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>园区方向功能对比</title>
  <script src="./echarts.js"></script>
  <style>
    html,
    body,
    #map {
      width: 900px;
      height: 900px;
      position: absolute;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    const charts = echarts532.init(document.getElementById("map"))
    outer = [
      { name: '阿根延', value: 47 },
      { name: '巴西', value: 41 },
      { name: '俄罗斯', value: 40 },
      { name: '奥地利', value: 38 },
      { name: '英国', value: 36 },
      { name: '法国', value: 36 },
      { name: '阿联酋', value: 36 },
      { name: '日本', value: 36 },
      { name: '葡萄牙', value: 35 },
      { name: '韩国', value: 34 },
      { name: '哥伦比亚', value: 33 },
      { name: '西班牙', value: 32 },
      { name: '马来西亚', value: 32 },
      { name: '新西兰', value: 31 },
      { name: '德国', value: 29 },
      { name: '瑞士', value: 28 },
      { name: '印度', value: 28 },
      { name: '南非', value: 27 },
      { name: '新加坡', value: 25 },
      { name: '美国', value: 25 },
      { name: '墨西哥', value: 25 },
      { name: '巴基斯坦', value: 25 },
      { name: '泰国', value: 22 },
      { name: '中国', value: 21 },
      { name: '菲律宾', value: 20 },
      { name: '加拿大', value: 18 }
    ]
    inner = [
      { value: '19', name: '阿根延' },
      { value: '11', name: '巴西' },
      { value: '12', name: '俄罗斯' },
      { value: '13', name: '奥地得' },
      { value: '8', name: '英国' },
      { value: '11', name: '法国' },
      { value: '14', name: '阿联酋' },
      { value: '16', name: '日本' },
      { value: '13', name: '葡萄牙' },
      { value: '15', name: '韩国' },
      { value: '18', name: '哥伦比亚' },
      { value: '10', name: '西班牙' },
      { value: '16', name: '马来西亚' },
      { value: '11', name: '新西兰' },
      { value: '9', name: '德国' },
      { value: '8', name: '瑞士' },
      { value: '16', name: '印度' },
      { value: '12', name: '南非' },
      { value: '11', name: '新加坡' },
      { value: '10', name: '美男' },
      { value: '9', name: '墨西哥' },
      { value: '11', name: '巴基斯坦' },
      { value: '16', name: '泰国' },
      { value: '11', name: '中国' },
      { value: '15', name: '菲律宾' },
      { value: '10', name: '加拿大' }
    ]
    const innerScatter = [];
    const perAngle = Math.PI / inner.length * 2;
    for (let i = 0; i < inner.length; i++) {
      const rotation = perAngle * i + Math.PI / 2 + perAngle / 2;
      // inner[i].value / 19对数据进行归一化处理,19为最大值
      let radius = Math.sqrt(inner[i].value / 19) * 50 * 0.5 - 2;
      if (i === 0) {
        radius = radius + 0.5;
      }
      const x = 50 + Math.cos(rotation) * radius;
      const y = 50 + Math.sin(rotation) * radius;
      innerScatter.push({
        type: 'scatter',
        data: [[x, y]],
        name: inner[i].name,
        itemStyle: {
          color: 'gold'
        },
        label: {
          normal: {
            show: true,
            color: '#000000',
            formatter: function (param) {
              return inner[i].value
            },
            rotate: 360 / outer.length * (i + 0.5)
          },
        },
      })
    }
    const outerScatter = [];
    const iconScatter = []
    for (let i = 0; i < outer.length; i++) {
      const rotation = perAngle * i + Math.PI / 2 + perAngle / 2;
      let radius = Math.sqrt(outer[i].value / 47) * 50 * 0.85 - 3;
      if (i === 0) {
        radius++;
      }
      const x = 50 + Math.cos(rotation) * radius;
      const y = 50 + Math.sin(rotation) * radius;
      outerScatter.push({
        type: 'scatter',
        data: [[x, y]],
        name: outer[i].name,
        itemStyle: {
          color: 'rgba(251, 46, 99, 1)'
        },
        label: {
          normal: {
            show: true,
            color: '#FFFFFF',
            formatter: function (param) {
              return outer[i].value - inner[i].value
            },
            rotate: 360 / outer.length * (i + 0.5)
          },
        },
      })
    }
    for (let i = 0; i < outer.length; i++) {
      const rotation = perAngle * i + Math.PI / 2 + perAngle / 2;
      const isChina = outer[i].name === '中国';
      let radius = Math.sqrt(outer[i].value / 47) * 50 * 0.85 + 4;
      if (i === 0) {
        radius += 1;
      }
      if (isChina) {
        radius += 3;
      }
      const x = 50 + Math.cos(rotation) * radius;
      const y = 50 + Math.sin(rotation) * radius;
      const offset = 25;
      const angle = 360 / outer.length * (i + 0.5)

      iconScatter.push({
        type: 'scatter',
        data: [[x, y]],
        name: outer[i].name,
        symbol: `image://./img/${i}.png`,
        symbolSize: 30,
        symbolRotate: angle,
        label: {
          normal: {
            show: !isChina,
            color: '#FFFFFF',
            offset: [0, 30],
            fontSize: 16,
            formatter: function (param) {
              return outer[i].name
            },
            rotate: angle
          },
        },
      })
    }
    const china = {};
    for (let i = 0; i < outer.length; i++) {
      const isChina = outer[i].name === '中国';
      if (!isChina) {
        continue;
      }
      const rotation = perAngle * i + Math.PI / 2 + perAngle / 2;
      let radius = Math.sqrt(outer[i].value / 47) * 50 * 0.85 - 1.2;
      const x = 50 + Math.cos(rotation) * radius;
      const y = 50 + Math.sin(rotation) * radius;
      const offset = 25;
      const angle = 360 / outer.length * (i + 0.5)
      china.data = [[x, y]];
      china.symbolRotate = angle
      china.symbol = `image://./img/${i}.png`
      break;
    }

    const chinaPin = {
      type: 'scatter',
      data: china.data,
      name: '中国',
      symbol: 'pin',
      symbolSize: 30,
      symbolRotate: china.symbolRotate,
      itemStyle: {
        //坐标点颜色
        normal: {
          show: false,
          color: "#ff3f3a",
          shadowBlur: 20,
          shadowColor: "#fff",
        },
        emphasis: {
          areaColor: "#f00",
        },
      },
      label: {
        normal: {
          show: true,
          color: '#FFFFFF',
          offset: [0, -25],
          fontSize: 16,
          formatter: '{a}',
          // formatter: function (param) {
          //   return outer[i].name
          // },
          rotate: china.symbolRotate
        },
      },
    }
    const logo = {
      type: 'scatter',
      data: [[50, 50]],
      name: 'logo',
      symbol: 'image://./img/logo.jpg',
      symbolSize: 185,
      z: 1
    }
    const option = {
      legend: {
        selectedMode: false,
        orient: 'vertical',
        right: '10',
        top: 100,
        type: 'scroll',
        textStyle: {
          fontSize: 14,
          color: '#FFFFFF',
        },
        data: ['法定节假日天数', '带薪休假天数(10年工龄)'],
      },
      backgroundColor: '#000000',
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: { // 添加保存为图片的功能
            show: true,
            title: '下载图片', // 自定义下载按钮的提示文字
            type: 'png', // 导出的图片类型，默认为 'png'
            name: 'my_chart', // 导出图片的文件名，默认为 'echarts图表'
            pixelRatio: 2, // 导出图片的像素密度，默认为 1，提高该值可以让导出的图片更清晰
          }
        }
      },
      title: [
        {
          text: '世界各国假期天数排行榜',
          top: '0%',
          left: '55%',
          textStyle: {
            color: '#FFF',
            fontSize: 34,
          },
        }, {
          text: '数据来源网络，仅供参考',
          bottom: '0%',
          left: 50,
          textStyle: {
            color: '#ccc',
            fontSize: 12,
          },
        }
      ],
      xAxis: {
        show: false,
        max: 100,
      },
      yAxis: {
        max: 100,
        show: false
      },
      series: [
        
        chinaPin,
        ...innerScatter,
        ...outerScatter,
        ...iconScatter,
        // 外圆
        {
          name: '带薪休假天数(10年工龄)',
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['30%', '85%'],
          roseType: 'area',
          data: outer,
          itemStyle: {
            borderColor: '#191919',
            borderWidth: 2,
            color: 'rgba(251, 46, 99, 1)'
          },
          clockwise: false,
          label: {
            show: false,
          },

          labelLine: { // 引导线配置，让引导线指向更准确
            show: false,
          }
        },
        {
          // 内圆
          type: 'pie',
          name: '法定节假日天数',
          center: ['50%', '50%'],
          radius: ['20%', '50%'],
          roseType: 'area',
          clockwise: false,
          itemStyle: {
            borderColor: '#191919',
            borderWidth: 1,
            color: 'gold'
          },
          label: {
            show: false
          },
          labelLine: {
            show: false,
          },
          data: inner,
        },
        logo,
      ],
    };

    charts.setOption(option)
  </script>
</body>

</html>